<template>
  <div class="profile">
    <AppHeader title="我的" />
    <h2>个人中心</h2>
    <p>这里是我的页面内容</p>
    <!-- 登录按钮，点击跳转到登录页 -->
    <button class="profile-btn" @click="$router.push('/login')">去登录</button>
    <!-- 注册按钮，点击跳转到注册页 -->
    <button class="profile-btn" @click="$router.push('/register')">去注册</button>
    <!-- 查看购物车按钮，点击跳转到购物车页 -->
    <button class="profile-btn" @click="$router.push('/cart')">查看购物车</button>
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'

export default {
  components: {
    AppHeader,
    AppFooter
  }
}
</script>

<style scoped>
.profile {
  padding: 4vw;
}
.profile-btn {
  margin: 1vw 0;
  padding: 2vw 4vw;
  font-size: 3.2vw;
  border: none;
  border-radius: 4px;
  background-color: #0097FF;
  color: #fff;
  cursor: pointer;
}
.profile-btn:hover {
  opacity: 0.8;
}
</style>